<template>
    <main class="container shop" >
        <div class="row" ref="row">
            <div class="col-lg-2 col-4 slide wrapper" ref="slide">
                <ul class="scroller" >
                    <li 
                        v-for="menuItem of list"
                        :key="menuItem.menu.id"
                        :class="{'active': active === menuItem.menu.id}"
                        @click="activeSlide(menuItem.menu.id)"
                    >
                        {{menuItem.menu.title}}
                    </li>
                </ul>

            </div>
            <div class="col-lg-10 col-8 item wrapper" ref="items">
                <ul class="scroller" >
                    <li
                        v-for="menuItem of list"
                        :key="menuItem.id"
                        class="commpdoty-container"
                    >
                        <h3 v-bind:id="menuItem.menu.id">{{menuItem.menu.title}}</h3>
                        <ul>
                            <li
                                v-for="commodity of menuItem.children"
                                :key="commodity.id"
                                class="commpdoty-items"
                            >
                                <div
                                    class="commpdoty-items_head"
                                >
                                    <div>标题{{ commodity.title }}</div>
                                    <div>描述{{ commodity.desc }}</div>
                                </div>
                                <div class="btn-container" >
                                    <a href="https://www.baidu.com?id=xxx" class="btn btn-primary" >购买</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

        </div>
    </main>
</template>
<script>
import IScroll from 'iscroll/build/iscroll-probe'

let list = []

for (let i = 0; i < 20; i++) {
    let menuId = Math.random()
    let children = []
    for (let j = 0; j < Math.floor(Math.random() * 10) + 1; j++) {
        let title = Math.random()
        children.push({
            id: Math.random(),
            title: title.toString(32),
            price: (Math.random() * 20).toFixed(2),
        })
    }
    list.push({
        menu: {
            id: menuId,
            title: menuId.toString(32)
        },
        children
    })
}

export default {
    data() {
        return {
            active: list[0].menu.id,
            list: list,
            isStop: true
        }
    },
    slide: null,
    items: null,
    mounted() {
        console.log(
            this.$refs.slide,
            this.$refs.item,
        )
        this.slide = new IScroll(this.$refs.slide, {
            fadeScrollbars: false,
            mouseWheel: true,
            scrollbars: true,
            probeType: 2,
        })
        this.items = new IScroll(this.$refs.items, {
            fadeScrollbars: false,
            mouseWheel: true,
            scrollbars: true,
            probeType: 2,
        })
        // this.items.on('scroll', this.scroll)
        this.items.on('scrollEnd', this.scrollEnd)
        this.$refs.row.addEventListener('touchmove', this.stop, { passive: false })
    },
    beforeDestroy() {
        this.$refs.row.removeEventListener('touchmove', this.stop)
    },
    methods: {
        stop(e) {
            e.preventDefault();
        },
        activeSlide(id) {
            this.active = id
            let eml = document.getElementById(id)
            this.items.scrollTo(0, -eml.offsetTop)
        },
        scrollEnd() {
            // this.$refs.row.addEventListener('touchmove', this.stop, { passive: false })
        }
    }
}
</script>
<style>
    .iScrollVerticalScrollbar{
        display: none;
    }
    .shop{
        height: calc(90vh - 64px);
    }
    .shop .row{
        height: 100%;
    }
    .slide{
        background: #eee !important;
        height: 100%;
        border-right: 1px solid #ccc;
    }
    .slide li:hover{
        background: #fff;
    }
    .slide li{
        cursor: pointer;
        background: #f5f5f5;
        padding: 5px 0;
        text-align: center;
    }
    .slide li.active{
        background: #fff;
    }
    .item{
        
    }
    .commpdoty{

    }
    .wrapper{
        position: relative;
        z-index: 1;
        top: 0px;
        bottom: 48px;
        left: 0;
        width: 100%;
        background: #f5f5f5;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden;
    }
    .scroller{
        position: absolute;
        list-style: none;
        color: #000;
        z-index: 1;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        width: 100px;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;
        background: #fff;
    }
    .scroller{
        width: 100%;
    }
    ul, li{
        margin: 0;
        padding: 0;
    }
    .active{
        background: #fff !important;
    }

    .commpdoty-container{
        text-align: left;
    }
    .commpdoty-container h3{
        font-size: 18px;
        padding: 5px;
    }
    .commpdoty-container .commpdoty-items{
        min-height: 50px;
        padding: 5px;
    }
    .commpdoty-container .commpdoty-items .commpdoty-items_head{
        font-size: 14px;
    }
    .commpdoty-container .commpdoty-items .btn-container{
        text-align: right;
    }
    
</style>